<style lang="scss">
	.banner {
		height: 400rpx;
		image {
			width: 100%;
			height: 400rpx;
		}
		
	}
	
	.title {
		text-align: center;
		color: yellowgreen;
	}
	
	.text-banner {
		height: 400rpx;
		.item {
			background-color: #bb3cb7;
			padding: 20px;
			color: white;
			.top {
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					width: 120rpx;
					height: 100rpx;
				}
			}
			.bottom {
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				> .item {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				image {
					width: 120rpx;
					height: 100rpx;
				}
			}
		}
	}
</style>

<template>
	<view>
		<uni-search-bar @focus="toSearch"></uni-search-bar>
		
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<view class="swiper-item">
					<image :src="item" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="title">
			--常用机器--
		</view>
		<swiper class="text-banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item item">
					<view class="top">
						<image src="../../static/images/123.png" mode=""></image>
						<text>设备</text>
					</view>
					<view class="bottom">
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
					</view>
				</view>
			</swiper-item>
<swiper-item>
				<view class="swiper-item item">
					<view class="top">
						<image src="../../static/images/123.png" mode=""></image>
						<text>设备</text>
					</view>
					<view class="bottom">
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item item">
					<view class="top">
						<image src="../../static/images/123.png" mode=""></image>
						<text>设备</text>
					</view>
					<view class="bottom">
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
						<view class="item">
							<image src="../../static/images/123.png" mode=""></image>
							<text>编号</text>
							<text>编码</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<button @click="change('zh')">中文</button>
		<button @click="change('en')">英文</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const swiperList = ref([
		"../../static/images/banner1.webp",
		"../../static/images/banner2.webp",
		"../../static/images/banner3.webp",
		"../../static/images/banner4.webp",
	])
	const toSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	
	const change = (lg) => {
		console.log(123)
		// uni.setLocale(lg)
	}

</script>
